<template>
  <div
    class="file-item"
    :class="{
      'file-item-selected': isSelected
    }"
  >
    <div class="file-item-menu" @click.stop>
      <el-checkbox :disabled="disabledEidt(item)" label="" :value="item.id" />
      <el-dropdown :disabled="disabledEidt(item)" placement="bottom" :teleported="false">
        <el-button :disabled="disabledEidt(item)" :icon="MoreFilled" color="red" text bg size="small" />
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click="createFolder(item)">重命名</el-dropdown-item>
            <el-dropdown-item v-if="item.rightStatus === 1" @click="permissionManagement(item)"
              >权限设置</el-dropdown-item
            >
            <el-dropdown-item @click="deleteResource(item)"
              ><span class="!c-[var(--el-color-danger)]">删除</span></el-dropdown-item
            >
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
    <Icon
      class="bpm-status-icon"
      :icon="item.resourceType === 'folder' ? 'fa:folder' : 'fa:file'"
      :size="55"
      color="var(--el-color-primary)"
    />
    <div class="file-name text-overflow-2">{{ item.name }}</div>
    <div v-if="item.resourceType === 'file' && item.size" class="file-size text-overflow-2"
      >{{ fileSizeFormatter(null, null, item.size) }}
    </div>
    <div v-if="item.resourceType === 'folder' && item.createTime" class="file-size text-overflow-2"
      >{{ formatDate(item.createTime) }}
    </div>
  </div>
</template>
<script setup lang="ts">
import { MoreFilled } from '@element-plus/icons-vue'
import { formatDate } from '@/utils/formatTime'
import { fileSizeFormatter } from '@/utils'
defineProps({
  item: {
    type: Object,
    default: () => ({})
  },
  isSelected: {
    type: Boolean,
    default: false
  }
})
const emit = defineEmits(['createFolder', 'permissionManagement', 'deleteResource'])
const disabledEidt = (item) => {
  return (item.rightStatus === 1 && item.operRight === 1)
}
const createFolder = (item) => {
  emit('createFolder', item)
}
const deleteResource = (item) => {
  emit('deleteResource', item)
}
const permissionManagement = (item) => {
  emit('permissionManagement', item)
}
</script>
<style lang="scss" scoped>
.file-item {
  display: flex;
  width: 104px;
  padding: 8px 14px 20px;
  cursor: pointer;
  border-radius: 6px;
  box-sizing: content-box;
  transition: background-color 0.3s;
  flex-direction: column;
  align-items: center;

  .file-item-menu {
    display: flex;
    width: 100%;
    min-height: 32px;
    margin-bottom: 8px;
    font-size: 12px;
    color: #0d0d0e;
    visibility: hidden;
    justify-content: space-between;
    align-items: center;
  }

  .file-name {
    width: 100%;
    margin-top: 8px;
    font-size: 12px;
    color: #03081a;
    text-align: center;
    transition: color 0.3s;
  }

  .file-size {
    width: 100%;
    margin-top: 3px;
    font-size: 12px;
    color: var(--el-color-info);
    text-align: center;
  }

  :deep() {
    .el-dropdown {
      visibility: hidden;

      .el-button.is-text{
        color: var(--el-color-primary)
      }
    }
  }

  &:hover {
    background-color: color-mix(in oklch, var(--el-color-primary), transparent 94%);

    .file-name {
      color: var(--el-color-primary);
    }

    :deep(.el-dropdown),
    .file-item-menu {
      visibility: visible;
    }
  }

  &.file-item-selected {
    background-color: color-mix(in oklch, var(--el-color-primary), transparent 90%);

    .file-item-menu {
      visibility: visible;
    }
  }
}
</style>
